<template>
	<canvas type="2d" style="width: 300px; height:300px; background-color: black" id="myCanvas"></canvas>
</template>

<script>
	import SVGA from "../../common/svga.min.js"
	export default {
		mounted() {
			let parser = new SVGA.Parser()
			let player = new SVGA.Player(wx.createSelectorQuery().in(this).select("#myCanvas"))
			//获取到myCanvas需要时间，这里最好加一个延时
			// let url = 'https://bloomerandroid172836-dev.s3.us-west-2.amazonaws.com/bloomer/pc/landingpage/call.svga'
			let url2 = 'https://github.com/svga/SVGA-Samples/raw/master/angel.svga'
			let svgFlag = setTimeout(() => {
				parser.load(url2, function(videoItem) {
					player.clear();
					player.setVideoItem(videoItem);
					player.startAnimation();

				})
				clearTimeout(svgFlag)
			}, 1000)
		}
	}
</script>

<style>
	#svgaBox {
		width: 256rpx;
		height: 256rpx;
		position: absolute;
		bottom: 128rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
